<template>
    <div>
        <div class="search">
            <input type="text" placeholder="输入城市名或拼音" v-model="keywords">
        </div>
        <div class="search-content" ref="search" v-show="keywords">
            <ul>
                <li v-for="item in list" :key="item.id" @click="handleCity(item.name)" class="search-item border-bottom">{{item.name}}</li>
                <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配的数据</li>
            </ul>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
import {mapMutations} from 'vuex'
    export default {
        props:{
            cities:Object
        },
        data() {
            return {
                keywords:'',
                list:[],
                timer:null,
            }
        },
        methods: {
            // 更改Vuex中的State
            handleCity(city){
                this.changeCity(city)
                this.$router.push('/')
            },
            // 把vuex中的Mutations映射到此处
            ...mapMutations(['changeCity'])
        },
        mounted() {
            this.scroll=new Bscroll(this.$refs.search)
        },
        computed: {
            // 显示提示有无数据
            hasNoData(){
                return !this.list.length
            }
        },
        watch:{
            keywords(){
                this.keywords=this.keywords.trim() //处理空格
                if(this.timer){
                    clearTimeout(this.timer)
                }
                if(!this.keywords) {
                    this.list=[]
                    return
                }
                this.timer=setTimeout(()=>{
                    let result = []
                    for(let i in this.cities){
                        this.cities[i].forEach(val=>{
                            // 检索关键字
                            if(val.spell.indexOf(this.keywords)>-1 || val.name.indexOf(this.keywords)>-1){
                                result.push(val)
                            }
                        })
                    }
                    this.list=result
                },100)
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/global.styl'
.search
    padding 0 .1rem
    height .72rem
    background $bgColor
    input 
        height .62rem
        line-height .62rem
        width 100%
        text-align center
        border-radius .06rem
        color #666
        padding 0 .1rem
        box-sizing border-box
.search-content
    position absolute
    top 1.58rem
    left 0
    right 0
    bottom 0
    overflow hidden
    z-index 1
    background #eee
    .search-item  
        line-height .62rem
        padding-left .2rem
        color #666
        background #fff
</style>